<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {message} from "ant-design-vue";
import {useInfoStore} from "@/store/user/user.ts";
import {useRouter} from "vue-router";
import {pageInterviewAPI} from "@/apis/interview.ts";
import {deleteNewAPI, pageNewAPI} from "@/apis/new.ts";


//分页查询岗位和企业信息
const count = 6;
const pageCurrent = ref(1);
const pageTotal = ref(0);
const initLoading = ref(true);
const loading = ref(false);
const list = <any>reactive([]);
//面试消息的数据
const pageInterviewDate = <any>ref({
  interviewStatus: '待面试',
  interviewJobseekerId: '',
  pageCurrent: pageCurrent.value,
  pageSize: count,
});
//其他消息的数据
const pageDate = <any>ref({
  newReceiverId: '',
  pageCurrent: pageCurrent.value,
  pageSize: count,
});
const newType = ref('interview');
const userStore = useInfoStore().userInfo;
const getInterviewList = async (pageInterviewDate: any) => {
  pageInterviewDate.interviewJobseekerId = userStore.userId;
  const res = await pageInterviewAPI(pageInterviewDate);
  if (res.data.flag) {
    pageTotal.value = res.data.data.total;
    list.push(...res.data.data.data)
    initLoading.value = false;
  } else {
    message.error(res.data.message)
  }
}
const getNewList = async (pageDate: any) => {
  pageDate.newReceiverId = userStore.userId;
  const res = await pageNewAPI(pageDate);
  if (res.data.flag) {
    pageTotal.value = res.data.data.total;
    list.push(...res.data.data.data)
    initLoading.value = false;
  } else {
    message.error(res.data.message)
  }
}

//生命周期
onMounted(() => {
  getInterviewList(pageInterviewDate.value);
});

const onLoadMore = () => {
  loading.value = true;
  initLoading.value = true;
  pageCurrent.value += 1;
  if(newType.value === 'interview') {
    getInterviewList(pageInterviewDate.value).then(() => {
      loading.value = false;
    });
  }else {
    getNewList(pageDate.value).then(() => {
      loading.value = false;
    });
  }
};

//筛选
const check = () => {
  list.splice(0, list.length);
  if (newType.value === 'interview') {
    getInterviewList(pageInterviewDate.value);
  } else {
    getNewList(pageDate.value);
  }

}
//查看面试
const router = useRouter();
const goToInterviewNewDetail = (interviewId: string) => {
  router.push({
    name: 'interviewNewDetail',
    params: {
      interviewId: interviewId // 确保传递的参数为字符串类型
    }
  });
};
//计算颜色
const Color = (colorType: string) => {
  switch (colorType) {
    case '正常招聘':
      return 'green';
    case '停止招聘':
      return 'red';
    case '已认证':
      return 'green';
    case '未认证':
      return 'red';
  }
}
//删除消息
const deleteNew = async (newId: string) => {
  const res = await deleteNewAPI({newId: newId});
  if (res.data.flag) {
    message.success(res.data.message);
    list.splice(0, list.length);
    await getNewList(pageDate.value);
  }
}

</script>
<template>
  <div class="collect">
    <div>
      <div class="title">
        <h4>
          我 的 消 息
        </h4>

      </div>
      <div class="filter">
        <a-radio-group v-model:value="newType" button-style="solid" @change="check">
          <a-radio-button style="width: 200px;text-align: center" value="interview">面 试 消 息</a-radio-button>
          <a-radio-button style="width: 200px;text-align: center" value="other">其 他 消 息</a-radio-button>
        </a-radio-group>
      </div>

    </div>

    <div class="main-content">
      <a-list
          :data-source="list"
          :loading="initLoading"
          class="demo-loadmore-list"
          item-layout="horizontal"
      >
        <template #loadMore>
          <div
              v-if="!initLoading && !loading && list.length < pageTotal"
              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
          >
            <a-button @click="onLoadMore">获取更多</a-button>
          </div>
        </template>
        <template #renderItem="{ item }">

          <a-list-item>
            <template #actions>
              <a-button v-if="(newType=='interview')" ghost type="primary" @click="goToInterviewNewDetail(item.interviewId)">查看</a-button>
              <a-button v-else danger ghost type="primary" @click="deleteNew(item.newId)">删除</a-button>
            </template>
              <a-skeleton v-if="(newType=='interview')" :loading="!!item.loading" :title="false" active avatar>

                <a-list-item-meta
                    :description="item.interviewType+'&nbsp;&nbsp;&nbsp;&nbsp'+item.jobLocation"
                >
                  <template #title>
                    {{ item.employerCompanyName }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.jobTitle }}
                  </template>
                  <template #avatar>
                    <a-avatar
                        :size="54"
                        :src="'http://localhost:8080/image/download?name=' + item.userAvatarUrl"
                    />
                  </template>
                </a-list-item-meta>
                <a-badge-ribbon :color="Color(item.employerIsVerified)" :text="item.employerIsVerified">
                  <div style="border-radius: 10px;width: auto;min-width:180px;background-color: #EAF2FF;padding: 10px">
                    <div>
                      行业: {{ item.employerCompanyIndustry }}
                    </div>
                    <div>
                      地点: {{ item.employerCompanyAddress }}
                    </div>
                  </div>
                </a-badge-ribbon>
              </a-skeleton>

              <a-skeleton v-else :loading="!!item.loading" :title="false" active avatar>
                <a-list-item-meta
                    :description="'内容 :&nbsp;&nbsp;&nbsp;&nbsp;'+item.newText"
                >
                  <template #title>
                    {{ item.newReceiverName }} :&nbsp;&nbsp;&nbsp;&nbsp;{{ item.newTitle }}
                  </template>
                  <template #avatar>
                    <a-avatar
                        :size="54"
                        :src="'http://localhost:8080/image/download?name=' + item.newCreatorAvatar"
                    />
                  </template>
                </a-list-item-meta>

                  <div style="border-radius: 10px;width: auto;min-width:180px;background-color: #EAF2FF;padding: 10px">
                    <div>
                      <h4>发送者: {{ item.newCreatorName }}</h4>
                    </div>
                  </div>

              </a-skeleton>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>

</template>

<style scoped>
.collect {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .title {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

  }

  .filter {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .main-content {
    width: 100%;
    flex-grow: 1;
    height: 90%;
    overflow: auto; /* 内容超出时自动显示滚动条 */

    .item_class {
      display: flex;
      width: 100%;

    }
  }

}

</style>
